<template>
  <div class="app-container flex flex-direction flex-sub"
    style="background: none; height: 100%; padding: 1rem">
    <el-card shadow="never"
      class="box-card flex-sub"
      style="overflow: auto">
      <div class="div-query">
        <div class="collapse">
          <div class="collapse-header"
            @click="panelActive = !panelActive">
            <i class="collapse-header-icon"
              :class="[
                panelActive ? 'el-icon-caret-bottom' : 'el-icon-caret-top',
              ]" />
            {{ panelActive ? '隐藏' : '展开' }}查询条件
          </div>
          <div class="collapse-content">
            <el-collapse-transition>
              <div v-show="panelActive">
                <el-form size="small"
                  label-position="right"
                  :inline="true">
                  <el-form-item label="工单编号"
                    label-width="80px">
                    <el-input v-model="searchModel.alramCode"
                      placeholder="工单编号"
                      clearable
                      class="filter-item search-item" />
                  </el-form-item>
                  <el-form-item label="工单状态"
                    label-width="80px">
                    <el-select v-model="searchModel.status"
                      placeholder="选择工单状态"
                      clearable
                      filterable>
                      <el-option v-for="item in statusList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="告警时间"
                    label-width="80px">
                    <el-date-picker v-model="value2"
                      type="datetimerange"
                      :picker-options="pickerOptions"
                      range-separator="至"
                      start-placeholder="告警开始时间"
                      end-placeholder="告警结束时间"
                      align="right"
                      @change="handleDateChange" />
                  </el-form-item>

                  <el-form-item label="告警类型"
                    label-width="80px">
                    <el-select v-model="searchModel.alarmType"
                      placeholder="选择告警类型"
                      clearable
                      filterable
                      @change="(e) => { if (e == '') delete this.searchModel['alarmType']; }">
                      <el-option v-for="item in alarmTypeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="派单人"
                    label-width="80px">
                    <el-input v-model="searchModel.confirmUser"
                      placeholder="派单人"
                      clearable
                      class="filter-item search-item" />
                  </el-form-item>
                  <el-form-item label="受理人"
                    label-width="80px">
                    <el-input v-model="searchModel.assigneeUserName"
                      placeholder="受理人"
                      clearable
                      class="filter-item search-item" />
                  </el-form-item>

                  <el-form-item label="回单人"
                    label-width="80px">
                    <el-input v-model="searchModel.jobReplyUserName"
                      placeholder="回单人"
                      clearable
                      class="filter-item search-item" />
                  </el-form-item>

                  <el-form-item style="margin-left: 10px">
                    <el-button type="primary"
                      icon="el-icon-search"
                      @click="toSearch"
                      size="small"
                      style="margin-right: 10px">搜索</el-button>
                    <el-button icon="el-icon-delete"
                      @click="toReset"
                      type="small"
                      style="margin-right: 10px">重置</el-button>
                    <el-button size="small"
                      @click="getDataList">
                      <i class="el-icon-refresh"
                        style="color: #606266" />
                      <span style="color: #606266">刷新</span>
                    </el-button>
                  </el-form-item>
                </el-form>
              </div>
            </el-collapse-transition>
          </div>
        </div>
      </div>

      <div>
        <div v-if="selectedDataList.length != 0"
          class="alert-div">
          <i class="el-icon-info"
            style="color: #1890ff; margin-right: 3px" />
          已选择
          <strong style="color: #1890ff; margin: 0px 1px; font-size: 15px">
            {{ selectedDataList.length }}
          </strong>
          项
          <el-button type="text"
            style="padding: 10px"
            @click="toEmptySelection">清空</el-button>
        </div>

        <el-popover v-model="popoverVisible"
          placement="top"
          trigger="manual">
          <el-button size="small"
            slot="reference"
            type="danger"
            icon="el-icon-edit-outline"
            style="margin-bottom: 8px"
            @click="toHandleList()">
            批量处理工单
          </el-button>
        </el-popover>

        <el-table ref="elTable"
          size="medium"
          v-loading="loading"
          border
          fixed
          fit
          :header-cell-style="{ background: '#fafafa' }"
          :data="dataList"
          row-key="index"
          style="width: 100%"
          @sort-change="onSortChange"
          @selection-change="onSelectionChange">
          <af-table-column align="center"
            type="selection"
            width="40"
            fixed
            :reserve-selection="true"
            :selectable="isChecked" />
          <el-table-column align="center"
            type="index"
            width="50"
            fixed
            label="#"
            :index="indexMethod" />
          <af-table-column align="center"
            label="工单编号"
            prop="alramCode" />
          <af-table-column align="center"
            label="工单状态"
            prop="status">
            <template slot-scope="{ row }">
              <el-tag size="medium"
                :style="row.status | constantKeyTagStyleObj('ORDER_STATUS')">
                {{ row.status | constantKeyValue('ORDER_STATUS') }}
              </el-tag>
            </template>
          </af-table-column>

          <af-table-column align="center"
            label="告警时间"
            prop="alarmOccurTime">
            <template slot-scope="{ row }">
              {{ row.alarmOccurTime | datefmt('YYYY-MM-DD HH:mm:ss') }}
            </template>
          </af-table-column>
          <af-table-column align="center"
            label="告警地点"
            prop="alarmLocation" />

          <af-table-column align="center"
            label="告警类型"
            prop="deviceStatus">
            <template slot-scope="{ row }">
              <el-tag size="medium"
                :style="row.deviceStatus | constantKeyTagStyleObj('WARNING_TYPE')">
                {{ row.deviceStatus | constantKeyValue('WARNING_TYPE') }}
              </el-tag>
            </template>
          </af-table-column>

          <af-table-column align="center"
            label="紧急程度"
            prop="urgency">
            <template slot-scope="{ row }">
              <el-tag size="medium"
                :style="row.urgency | constantKeyTagStyleObj('URGENCY')">
                {{ row.urgency | constantKeyValue('URGENCY') }}
              </el-tag>
            </template>
          </af-table-column>

          <af-table-column align="center"
            label="派单时间"
            prop="confirmTime">
            <template slot-scope="{ row }">
              {{ row.confirmTime | datefmt('YYYY-MM-DD HH:mm:ss') }}
            </template>
          </af-table-column>
          <af-table-column align="center"
            label="派单人"
            prop="confirmUser" />

          <af-table-column align="center"
            label="受理时间"
            prop="assigneeTime">
            <template slot-scope="{ row }">
              {{ row.assigneeTime | datefmt('YYYY-MM-DD HH:mm:ss') }}
            </template>
          </af-table-column>
          <af-table-column align="center"
            label="受理人"
            prop="assigneeUserName" />

          <af-table-column align="center"
            label="回单时间"
            prop="jobReplyTime">
            <template slot-scope="{ row }">
              {{ row.jobReplyTime | datefmt('YYYY-MM-DD HH:mm:ss') }}
            </template>
          </af-table-column>
          <af-table-column align="center"
            label="回单人"
            prop="jobReplyUserName" />
          <af-table-column align="center"
            label="创建时间"
            prop="createdTime">
            <template slot-scope="{ row }">
              {{ row.createdTime | datefmt('YYYY-MM-DD HH:mm:ss') }}
            </template>
          </af-table-column>
          <af-table-column align="center"
            label="创建人"
            prop="createdUser" />

          <af-table-column align="center"
            label="更新时间"
            prop="updatedTime" />
          <el-table-column align="center"
            label="操作区"
            fixed="right"
            width="100">
            <template slot-scope="{ row }">
              <el-tooltip effect="dark"
                content="详情"
                placement="top-start">
                <i class="iconfont icon-chakanxiangqing2 i-detail"
                  @click="toDetail(row)" />
              </el-tooltip>

              <i class="iconfont icon-fengefu i-fengefu" />

              <el-tooltip effect="dark"
                content="工单处理"
                placement="top-start">
                <i class="iconfont icon-bianji2 i-edit"
                  @click="toHandle(row)"
                  v-if="row.status !== 3" />
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0"
          :total="total"
          :page.sync="pagination.pageNum"
          :limit.sync="pagination.pageSize"
          :page-sizes="pageSizeOptions"
          @pagination="getDataList" />
        <detail v-if="detailDialogObj.isVisible"
          ref="detailDialog"
          :dialog-visible="detailDialogObj.isVisible"
          :title="detailDialogObj.title"
          :params="params"
          @close="dialogClose('detailDialogObj')" />
        <handle v-if="handleDialogObj.isVisible"
          ref="orderAdd"
          :params="params"
          :title="handleDialogObj.title"
          :dialog-visible="handleDialogObj.isVisible"
          :selected="selectedDataList"
          @close="handleClose()" />
      </div>
    </el-card>
  </div>
</template>

<script>
import orderManageApi from '@/api/order-manage'
import deviceManageApi from '@/api/device-manage'
import Pagination from '@/components/Pagination'
import dataTableMixins from '@/mixins/data-table-mixins'
import Detail from './components/detail.vue'
import Handle from './components/handle.vue'
export default {
  name: 'DeviceList',
  components: {
    Pagination,
    Detail,
    Handle,
  },
  mixins: [dataTableMixins],
  data () {
    return {
      popoverVisible: false,
      statusList: [
        { label: '待处理', value: 1 },
        { label: '已处理', value: 2 },
      ],
      alarmTypeList: [
        { label: '故障', value: 1 },
        { label: '报警', value: 2 },
        { label: '反馈', value: 3 },
        { label: '启动', value: 4 },
      ],
      handleDialogObj: {
        isVisible: false,
        title: '',
      },
      value: '',
      value2: '',
      pickerOptions: '',
      orderEditVisiable: false,
    }
  },
  created () { },
  mounted () {
    this.getDataList()
  },
  methods: {
    isChecked (row, index) {
      if (row.status === 3) {
        return false
      }
      return true
    },
    getDataList () {
      this.loading = true
      const searchModel = this.formatSearchData(this.searchModel)
      console.log(this.searchModel, searchModel, '1231')
      orderManageApi
        .getOrderList({
          ...this.pagination,
          ...searchModel,
        })
        .then((ret) => {
          this.dataList = ret.data.data.rows
          // this.dataList.forEach((ele, i) => {
          //   this.selectedDataList.forEach((multEle, j) => {
          //     if (this.dataList[i].id === this.selectedDataList[j].id) {
          //       this.$refs.elTable.toggleRowSelection(this.dataList[i], true)
          //     }
          //   })
          // })
          this.total = ret.data.data.total
          this.loading = false
        })
        .catch(() => {
          this.loading = false
          this.dataList = []
          this.total = 0
        })
    },
    toSearch () {
      this.pagination.pageNum = 1
      this.getDataList()
    },
    toReset () {
      this.searchModel = {}
      this.sort = {}
      this.$refs.elTable.clearSort()
      this.$refs.elTable.clearFilter()
      this.value2 = ''
      this.toSearch()
    },
    onSortChange (val) {
      console.log(val)
      this.sort.field = val.prop
      this.sort.order = val.order
      this.toSearch()
    },
    onSelectionChange (selection) {
      this.selectedDataList = selection
    },
    toEmptySelection () {
      this.$refs.elTable.clearSelection()
    },
    indexMethod (index) {
      return this.formatIndex(index, this.pagination)
    },
    toDetail (data) {
      this.params = {
        ...data,
      }
      this.detailDialogObj.title = '工单列表 ＞详情'
      this.detailDialogObj.isVisible = true
    },
    toHandle (data) {
      this.params = {
        ...data,
      }
      this.handleDialogObj.title = '工单列表 ＞工单处理'
      this.handleDialogObj.isVisible = true
    },
    handleDateChange (value) {
      if (value) {
        this.searchModel.jobCreateStartTime = this.$moment(value[0]).format(
          'YYYY-MM-DD HH:mm:ss'
        )
        this.searchModel.jobCreateEndTime = this.$moment(value[1]).format(
          'YYYY-MM-DD HH:mm:ss'
        )
      } else {
        this.searchModel.jobCreateStartTime = ''
        this.searchModel.jobCreateEndTime = ''
      }
    },
    getResultDictData () {
      const data = {
        fieldName: 'process_result',
        tableName: 't_job_reply',
      }
      deviceManageApi.getDictValueAttr(data).then((r) => {
        this.resultDictData = r.data.dictValue
      })
    },
    toHandleList () {
      if (!this.selectedDataList.length) {
        this.$message.warning('请勾选批量处理的数据')
        return false
      }
      this.handleDialogObj.title = '工单列表 ＞批量工单处理'
      this.handleDialogObj.isVisible = true
    },
    handleClose () {
      this.params = {}
      this.toSearch()
      this.handleDialogObj.isVisible = false
    },
    alarmTypeChange (e) {
      console.log(JSON.stringify(e) == "", '123123')
      if (JSON.stringify(e) == '') {
        this.searchModel.alarmType = 100
        console.log(this.searchModel.alarmType)
      }
    }
  },
}
</script>

<style lang="scss" scoped>@import '../../../styles/part-custom';</style>
